﻿<%@ Page Title="Agendamento de tattoo" MasterPageFile="~/Site.master" Language="C#" AutoEventWireup="true" CodeBehind="TattooApointment.aspx.cs" Inherits="LuckyLoot.Presentation.TattooApointmentPage" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <fieldset><legend>Agendamento de tatuagem</legend>
    <div>
        <input type="hidden" id="tattooID" runat="server" clientidmode="Static" />
        <label for="tattooTitle">Titulo (breve descrição)*</label><br />
        <asp:TextBox runat="server" ID="tattooTitle" ClientIDMode="Static" required CssClass="k-textbox"></asp:TextBox><br />

        <label for="tattooDescription">Descrição</label><br />
        <asp:TextBox runat="server" ID="tattooDescription" Width="350" ClientIDMode="Static" TextMode="MultiLine" Columns="20" Rows="4"  CssClass="k-textbox"></asp:TextBox><br />
        
        <label for="tattooCustomer">Cliente*</label><br />
        <asp:DropDownList runat="server" ID="tattooCustomer" Width="350" ClientIDMode="Static" required></asp:DropDownList><br />

        <label for="tattooArtist">Tatuador*</label><br />
        <asp:DropDownList runat="server" ID="tattooArtist" Width="350" ClientIDMode="Static" required></asp:DropDownList><br />

        <label for="tattooDate">Data*</label><br />
        <asp:TextBox runat="server" ID="tattooDate" Width="350" ClientIDMode="Static" required></asp:TextBox><span class="k-invalid-msg" data-for="ctl00$MainContent$tattooDate"></span><br />

        <label for="tattooSize">Tamanho*</label><br />
        <asp:DropDownList runat="server" ID="tattooSize" Width="350" ClientIDMode="Static" required></asp:DropDownList><br />

        <label for="tattooStyle">Estilo*</label><br />
        <asp:DropDownList runat="server" ID="tattooStyle" Width="350" ClientIDMode="Static" required></asp:DropDownList><br />

        <label for="tattooColors">Cor*</label><br />
        <asp:DropDownList runat="server" ID="tattooColors" Width="350" ClientIDMode="Static" required></asp:DropDownList><br />
        <br />
        
        

        <div id="newSessionWindow" style="display:none;">
            <label for="sessionDate">Data da próxima sessão*</label><br />
            <asp:TextBox runat="server" ID="sessionDate" Width="350" ClientIDMode="Static"></asp:TextBox><br /><br />    
            <asp:LinkButton runat="server" ID="SaveSession" Text="Salvar" CssClass="k-button" /> 
        </div>
    
        <div id="addPhotosWindow" style="display:none;">
            <label for="tattooPhotos">Fotos</label><br />
            <asp:FileUpload ID="tattooPhotos" ClientIDMode="Static" Width="350" runat="server" /><br /><br />
            <asp:LinkButton runat="server" ID="SavePhotos" Text="Salvar" CssClass="k-button" /> 
        </div>


        <asp:Button runat="server" ID="SaveTattoo" Text="Salvar" CssClass="k-button" /> 
        <input type="button" class="k-button" id="AddSession" value="Marcar nova sessão" runat="server" />
        <input type="button" class="k-button" id="AddPhotos" value="Adicionar fotos" runat="server" />
        <asp:Button runat="server" ID="NewTattoo" Text="Novo" CssClass="k-button" /> 


    </div>
    </fieldset>
    
    <h1><asp:Label ID="tattoosLabel" Visible="false" runat="server" Text="Tatuagens"></asp:Label></h1>
    <asp:GridView ID="tattoosGrid" Visible="false" DataKeyNames="Id" ClientIDMode="Static" runat="server" EmptyDataText="-" ></asp:GridView>
    
    <h1><asp:Label ID="tattooPhotosLabel" Visible="false" runat="server" Text="Imagens de referência"></asp:Label></h1>
    <asp:GridView ID="tattooPhotosGrid" Visible="false" ClientIDMode="Static" runat="server" EmptyDataText="-" >
    </asp:GridView>

    <table id="grid" clientidmode="Static">
        <thead>
            <tr>
                <th>
                    Id
                </th>
                <th>
                    Imagem relacionada
                </th>
        </thead>
        <tbody>
            <td colspan="2"></td>
        </tbody>
    </table>

         <script>
             $(document).ready(function () {
                 jQuery.support.cors = true;

                 var currentTime = new Date();
                 var month = currentTime.getMonth();
                 var day = currentTime.getDate();
                 var year = currentTime.getFullYear();

                 $("#tattooDate").kendoDateTimePicker({
                     format: "dd/MM/yyyy HH:mm",
                     start: "month",
                     depth: "month",
                     min: new Date(year, month, day)
                 });

                 $("#tattooCustomer").kendoComboBox();

                 $("#tattooArtist").kendoComboBox();

                 $("#tattooSize").kendoDropDownList();

                 $("#tattooStyle").kendoDropDownList();

                 $("#tattooColors").kendoDropDownList();


                 var getPhotosURL = "http://localhost:53846/MassDataProviderService.svc/Photos/";

                 var sharedDataSource = new kendo.data.DataSource({
                     transport: {
                         read: {
                             type: "GET",
                             url: getPhotosURL + $('input#tattooID').val(),
                             cache: false,
                             dataType: "json"
                         }
                     }
                 });

                 $("#grid").kendoGrid({
                     columns: [{ field: 'Id' }, { field: 'Content', template: "<img src='${ Content }' height=100/>"}],
                     dataSource: sharedDataSource,
                     scrollable: false,
                     selectable: true,
                     sortable: true
                 });
                 $("#tattoosGrid").kendoGrid({
                     selectable: true
                 });

                 // New Session Window
                 /*
                
                 $("#newSessionWindow").kendoWindow({
                 draggable: true,
                 appendTo: "#globalBody",
                 height: "110px",
                 modal: true,
                 resizable: false,
                 title: "Nova sessão",
                 width: "400px"
                 });*/

                 $("#sessionDate").kendoDateTimePicker({
                     format: "dd/MM/yyyy HH:mm",
                     start: "month",
                     depth: "month",
                     min: new Date(year, month, day)
                 });

                 $("#MainContent_AddSession").click(function (e) {
                     $("#newSessionWindow").show();
                     /*
                     var newSession = $("#newSessionWindow").data("kendoWindow");
                     newSession.center();
                     newSession.open();
                     */
                     e.preventDefault();
                 });


                 // Photos Window
                 /*$("#addPhotosWindow").kendoWindow({
                     draggable: true,
                     appendTo: "#globalBody",
                     height: "150px",
                     modal: true,
                     resizable: false,
                     title: "Fotos da tatuagem",
                     width: "400px"
                 });*/

                 $("#tattooPhotos").kendoUpload();

                 $("#MainContent_AddPhotos").click(function (e) {
                     $("#addPhotosWindow").show();
                     /*
                     var photosWindow = $("#addPhotosWindow").data("kendoWindow");
                     photosWindow.center();
                     photosWindow.open();
                     */
                     e.preventDefault();
                 });
             });
</script>
</asp:Content>
